<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>其它费用</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all"/>
    <link rel="stylesheet" href="../css/main.css" media="all"/>
    <link rel="stylesheet" href="../css/otherFee.css" media="all"/>
</head>
<style>
    #addopen .layui-tab {
        margin: 0 !important;
    }
</style>
<body class="childrenBody all">
<div id="all">
    <div class="top">
        <div>
            <button type="button" class="layui-btn" @click="adduser(1)"><i class="layui-icon">&#xe608;</i> 添加</button>
            <button type="button" @click="exports" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe621;</i>导出
            </button>
        </div>
        <div class="top_right">
            <!--<div class="layui-input-inline">-->
                <!--<input type="tel" name="phone" lay-verify="required|phone" placeholder="搜索项目序号、员工编号、费用类型、名称、使用人员"-->
                       <!--autocomplete="off" class="layui-input">-->
            <!--</div>-->
            <!--<div>-->
                <!--<button type="button" class="layui-btn layui-btn-normal">搜索</button>-->
            <!--</div>-->
        </div>
    </div>
    <div class="tabs">
        <table class="layui-table">
            <tr class="gray">
                <th>操作</th>
                <th>序号</th>
                <th>填写日期</th>
                <th>填表人</th>
                <th>费用编号</th>
                <th>名称</th>
                <th>支出内容(星级)</th>
                <th>单位(基数)<br/>年薪/社保费</th>
                <th>数量(系数)</th>
                <th>单价(日薪)</th>
                <th>金额</th>
                <th>使用人员(职务)</th>
                <th>备注</th>
            </tr>
            <tr v-for="(item, index) in arr1" :key="index">
                <td>
                    <span class="operation" @click="adduser(2, item.id, 0)">编辑</span>
                    <span @click="del(item.id)" class="operation">删除</span>
                </td>
                <td>{{item.id}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.other.fy_num}}</td>
                <td>{{item.other.fy_name}}</td>
                <td>{{item.spend}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.num}}</td>
                <td>{{item.price}}</td>
                <td>{{item.total}}</td>
                <td>{{item.usepeople}}</td>
                <td>{{item.note}}</td>
            </tr>
            <tr class="gray">
                <td></td>
                <td colspan="9"><b>办公费合计</b></td>
                <td><b>{{j1}}</b></td>
                <td colspan="2"></td>
            </tr>
        </table>
        <table class="layui-table">
            <tr class="gray">
                <th>操作</th>
                <th>序号</th>
                <th>填写日期</th>
                <th>填表人</th>
                <th>费用编号</th>
                <th>名称</th>
                <th>支出内容(星级)</th>
                <th>单位(基数)<br/>年薪/社保费</th>
                <th>数量(系数)</th>
                <th>单价(日薪)</th>
                <th>金额</th>
                <th>使用人员(职务)</th>
                <th>备注</th>
            </tr>
            <tr v-for="(item, index) in arr2" :key="index +1">
                <td>
                    <span class="operation" @click="adduser(2, item.id, 1)">编辑</span>
                    <span @click="del(item.id)" class="operation">删除</span>
                </td>
                <td>{{item.id}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.other.fy_num}}</td>
                <td>{{item.other.fy_name}}</td>
                <td>{{item.spend}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.num}}</td>
                <td>{{item.price}}</td>
                <td>{{item.total}}</td>
                <td>{{item.usepeople}}</td>
                <td>{{item.note}}</td>
            </tr>
            <tr class="gray">
                <td></td>
                <td colspan="9"><b>差旅费合计</b></td>
                <td><b>{{j2}}</b></td>
                <td colspan="2"></td>
            </tr>
        </table>
        <table class="layui-table">
            <tr class="gray">
                <th>操作</th>
                <th>序号</th>
                <th>填写日期</th>
                <th>填表人</th>
                <th>费用编号</th>
                <th>名称</th>
                <th>支出内容(星级)</th>
                <th>单位(基数)<br/>年薪/社保费</th>
                <th>数量(系数)</th>
                <th>单价(日薪)</th>
                <th>金额</th>
                <th>使用人员(职务)</th>
                <th>备注</th>
            </tr>
            <tr v-for="(item, index) in arr3" :key="index+2">
                <td>
                    <span class="operation" @click="adduser(2, item.id, 2)">编辑</span>
                    <span @click="del(item.id)" class="operation">删除</span>
                </td>
                <td>{{item.id}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.other.fy_num}}</td>
                <td>{{item.other.fy_name}}</td>
                <td>{{item.spend}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.num}}</td>
                <td>{{item.price}}</td>
                <td>{{item.total}}</td>
                <td>{{item.usepeople}}</td>
                <td>{{item.note}}</td>
            </tr>
            <tr class="gray">
                <td></td>
                <td colspan="9"><b>车辆使用费合计</b></td>
                <td><b>{{j3}}</b></td>
                <td colspan="2"></td>
            </tr>
        </table>
        <table class="layui-table">
            <tr class="gray">
                <th>操作</th>
                <th>序号</th>
                <th>填写日期</th>
                <th>填表人</th>
                <th>费用编号</th>
                <th>名称</th>
                <th>支出内容(星级)</th>
                <th>单位(基数)<br/>年薪/社保费</th>
                <th>数量(系数)</th>
                <th>单价(日薪)</th>
                <th>金额</th>
                <th>使用人员(职务)</th>
                <th>备注</th>
            </tr>
            <tr v-for="(item, index) in arr4" :key="index+3">
                <td>
                    <span class="operation" @click="adduser(2, item.id, 3)">编辑</span>
                    <span @click="del(item.id)" class="operation">删除</span>
                </td>
                <td>{{item.id}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.other.fy_num}}</td>
                <td>{{item.other.fy_name}}</td>
                <td>{{item.spend}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.num}}</td>
                <td>{{item.price}}</td>
                <td>{{item.total}}</td>
                <td>{{item.usepeople}}</td>
                <td>{{item.note}}</td>
            </tr>
            <tr class="gray">
                <td></td>
                <td colspan="9"><b>其它合计</b></td>
                <td><b>{{j4}}</b></td>
                <td colspan="2"></td>
            </tr>
        </table>
    </div>
    <div class="x-body" id="addopen" style="display: none;">
        <div class="layui-tab" lay-filter="types">
            <ul class="layui-tab-title" id="tabli">
                <li class="layui-this">办公费</li>
                <li>差旅费</li>
                <li>车辆使用费</li>
                <li>其它费</li>
            </ul>
            <div class="layui-tab-content" id="tabcontext" style="height: 100px;">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" id="tabs1" lay-filter="tabs1">
                        <div class="layui-form-item">
                            <label for="fy_name" class="layui-form-label">
                                <span class="x-red">*</span>名称
                            </label>
                            <div class="layui-input-inline">
                                <select id="fy_name" lay-filter="demo1" lay-search="" name="fy_name"
                                        class="valid">
                                </select>
                            </div>
                            <label for="fy_num" class="layui-form-label">
                                <span class="x-red">*</span>费用编号
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" id="fy_num" disabled name="fy_num"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="spend" class="layui-form-label">
                                <span class="x-red">*</span>支出内容
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" id="spend" lay-verify="required" v-model="spend" name="spend"
                                       autocomplete="off" class="layui-input">
                            </div>


                            <label for="unit" class="layui-form-label">
                                <span class="x-red">*</span>单位
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" id="unit" lay-verify="required" v-model="unit" name="unit"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="num" class="layui-form-label">
                                <span class="x-red">*</span>数量
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" v-model="num" id="num" onkeyup="value=value.replace(/[^\d.]/g,'')" lay-verify="required"
                                       name="num"
                                       autocomplete="off" class="layui-input">
                            </div>
                            <label for="price" class="layui-form-label">
                                <span class="x-red">*</span>单价
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" v-model="price" onkeyup="value=value.replace(/[^\d.]/g,'')" lay-verify="required" id="price"
                                       name="price"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="total" class="layui-form-label">
                                <span class="x-red">*</span>金额
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" id="total" v-model="total" disabled name="total"
                                       autocomplete="off" class="layui-input">
                            </div>
                            <label for="usepeople" class="layui-form-label">
                                <span class="x-red">*</span>使用人员
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" id="usepeople" v-model="usepeople" lay-verify="required"
                                       name="usepeople"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="note" class="layui-form-label">
                                备注
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" id="note" v-model="note" name="note"
                                       autocomplete="off" class="layui-input">
                            </div>
                            <label for="tcreatetime" class="layui-form-label">
                                <span class="x-red">*</span>日期
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" name="tcreatetime" lay-verify="date" placeholder=""
                                       autocomplete="off" placeholder="选择日期" class="layui-input" id="tcreatetime">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                            </label>
                            <button class="layui-btn" type="button" lay-filter="add" lay-submit="">
                                保存
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div style="display: none" id="hesan">
        <table class="layui-table tab1" id="dctable">
            <tr class="gray">
                <th>操作</th>
                <th>序号</th>
                <th>填写日期</th>
                <th>填表人</th>
                <th>费用编号</th>
                <th>名称</th>
                <th>支出内容(星级)</th>
                <th>单位(基数)<br/>年薪/社保费</th>
                <th>数量(系数)</th>
                <th>单价(日薪)</th>
                <th>金额</th>
                <th>使用人员(职务)</th>
                <th>备注</th>
            </tr>
            <tr v-for="(item, index) in arr1">
                <td>
                    <span>编辑</span>
                    <span>删除</span>
                </td>
                <td>{{item.id}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.other.fy_num}}</td>
                <td>{{item.other.fy_name}}</td>
                <td>{{item.spend}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.num}}</td>
                <td>{{item.price}}</td>
                <td>{{item.total}}</td>
                <td>{{item.usepeople}}</td>
                <td>{{item.note}}</td>
            </tr>
            <tr class="gray">
                <td></td>
                <td colspan="9"><b>办公费合计</b></td>
                <td><b>{{j1}}</b></td>
                <td colspan="2"></td>
            </tr>
            <tr class="gray">
                <th>操作</th>
                <th>序号</th>
                <th>填写日期</th>
                <th>填表人</th>
                <th>费用编号</th>
                <th>名称</th>
                <th>支出内容(星级)</th>
                <th>单位(基数)<br/>年薪/社保费</th>
                <th>数量(系数)</th>
                <th>单价(日薪)</th>
                <th>金额</th>
                <th>使用人员(职务)</th>
                <th>备注</th>
            </tr>
            <tr v-for="(item, index) in arr2">
                <td>
                    <span>编辑</span>
                    <span>删除</span>
                </td>
                <td>{{item.id}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.other.fy_num}}</td>
                <td>{{item.other.fy_name}}</td>
                <td>{{item.spend}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.num}}</td>
                <td>{{item.price}}</td>
                <td>{{item.total}}</td>
                <td>{{item.usepeople}}</td>
                <td>{{item.note}}</td>
            </tr>
            <tr class="gray">
                <td></td>
                <td colspan="9"><b>差旅费合计</b></td>
                <td><b>{{j2}}</b></td>
                <td colspan="2"></td>
            </tr>
            <tr class="gray">
                <th>操作</th>
                <th>序号</th>
                <th>填写日期</th>
                <th>填表人</th>
                <th>费用编号</th>
                <th>名称</th>
                <th>支出内容(星级)</th>
                <th>单位(基数)<br/>年薪/社保费</th>
                <th>数量(系数)</th>
                <th>单价(日薪)</th>
                <th>金额</th>
                <th>使用人员(职务)</th>
                <th>备注</th>
            </tr>
            <tr v-for="(item, index) in arr3">
                <td>
                    <span>编辑</span>
                    <span>删除</span>
                </td>
                <td>{{item.id}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.other.fy_num}}</td>
                <td>{{item.other.fy_name}}</td>
                <td>{{item.spend}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.num}}</td>
                <td>{{item.price}}</td>
                <td>{{item.total}}</td>
                <td>{{item.usepeople}}</td>
                <td>{{item.note}}</td>
            </tr>
            <tr class="gray">
                <td></td>
                <td colspan="9"><b>车辆使用费合计</b></td>
                <td><b>{{j3}}</b></td>
                <td colspan="2"></td>
            </tr>
            <tr class="gray">
                <th>操作</th>
                <th>序号</th>
                <th>填写日期</th>
                <th>填表人</th>
                <th>费用编号</th>
                <th>名称</th>
                <th>支出内容(星级)</th>
                <th>单位(基数)<br/>年薪/社保费</th>
                <th>数量(系数)</th>
                <th>单价(日薪)</th>
                <th>金额</th>
                <th>使用人员(职务)</th>
                <th>备注</th>
            </tr>
            <tr v-for="(item, index) in arr4">
                <td>
                    <span>编辑</span>
                    <span>删除</span>
                </td>
                <td>{{item.id}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.other.fy_num}}</td>
                <td>{{item.other.fy_name}}</td>
                <td>{{item.spend}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.num}}</td>
                <td>{{item.price}}</td>
                <td>{{item.total}}</td>
                <td>{{item.usepeople}}</td>
                <td>{{item.note}}</td>
            </tr>
            <tr class="gray">
                <td></td>
                <td colspan="9"><b>其它合计</b></td>
                <td><b>{{j4}}</b></td>
                <td colspan="2"></td>
            </tr>
        </table>
    </div>
</div>
<div id="demo8"></div>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../layui/layui.all.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
<script type="text/javascript" src="../js/excel.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
</body>
</html>
<script>
    var vm = new Vue({
        el: '#all',
        data: {
            arr1: [],
            arr2: [],
            arr3: [],
            arr4: [],
            tabs: 0, //tab index
            page: 1,
            project_id: sessionStorage.getItem('projectopt'),
            j1: '0', //材料 金额
            j2: '0', //人工 金额
            j3: '0', //机械 金额
            j4: '0', //机械 金额
            spend: '', //支出内容
            unit: '', //单位
            num: '', //数量
            price: '',// 单价
            total: '', //金额
            usepeople: '', //使用人员
            note: '', //备注
            yid: '',  //select id
            stus: '', //新增修改标识
            tid: '', //当前编辑id
            permissions:''//权限标识
//            number: '', //数量
//            amount: '', //金额

        },
        created: function () {
            this.initData();
        },
        mounted: function () {
            layui.use(['laypage', 'layer', 'element', 'form'], function () {
                var laypage = layui.laypage,
                    layer = layui.layer,
                    form = layui.form,
                    element = layui.element,
                    laydate = layui.laydate,
                    $ = layui.jquery;

                    laydate.render({
                        elem: '#tcreatetime',
                        value: new Date()
                    })
                element.on('tab(types)', function (data) {
                    if (vm.tabs != data.index) {
                        vm.spend = '';
                        vm.unit = '';
                        vm.num = '';
                        vm.price = '';
                        vm.total = '';
                        vm.usepeople = '';
                        vm.note = '';
                        vm.tabs = data.index;
                        $("#fy_name").empty();
                        vm.initselect()
                        var select = 'dd[lay-value=""]';// 设置value
                        $('#fy_name').siblings("div.layui-form-select").find('dl').find(select).click();
                        layui.form.render('select');// 再次渲染select
                    }
                });
                form.on('select(demo1)', function (data) {
                    var darr = data.value.split(',');
                    $("#fy_num").val(darr[0]);
                    vm.yid = darr[1];
                })
                form.on('submit(add)', function (data) {
                    var load = layer.load(2, {
                        shade: [0.6, '#fff'] //0.1透明度的白色背景
                    });
                    var obj = {
                        project_id: vm.project_id,
                        type: vm.tabs + 1,
                        spend: data.field.spend,
                        unit: data.field.unit,
                        num: data.field.num,
                        price: data.field.price,
                        total: data.field.total,
                        usepeople: data.field.usepeople,
                        note: data.field.note,
                        other_id: vm.yid,
                        createtime: data.field.tcreatetime
                    }
                    var url = '';
                    if (vm.stus == 1) {
                        url = 'api/Othermoney/othermoneyadd';
                    } else {
                        url = 'api/Othermoney/othermoneyeditdo';
                        obj.id = vm.tid;
                    }
                    $.when(PUATTRBUTE.REQUESTFUN(url, obj).done(function (res) {
                            layui.layer.close(load)
                            if (res.code == 1) {
                                layui.layer.msg(res.msg, {time: 1000, icon: 1});
                                vm.initData();
                                layer.closeAll();
                                layui.form.render();
                            } else {
                                layui.layer.msg(res.msg, {time: 1000, icon: 2})
                            }
                        })
                    )
                })
            });
        },
        methods: {
            //初始化数据
            initData: function () {
                var obj = {
                    page: this.page,
                    limit: 12,
                    project_id: this.project_id
                }
                var load = layer.load(2, {
                    shade: [0.6, '#fff'] //0.1透明度的白色背景
                })
                $.when(PUATTRBUTE.REQUESTFUN('api/Othermoney/othermoneyindex', obj).done(function (res) {
                        layer.close(load)
                        if (res.code == 1) {
                            var total_money = 0;
                            for (item in res.data.bangong) {
                                total_money += PUATTRBUTE.CHANGETWO(res.data.bangong[item].total);
                            }
                            vm.arr1 = res.data.bangong;
                            vm.j1 = total_money;

                            var total_money = 0;
                            for (item in res.data.chailv) {
                                total_money += PUATTRBUTE.CHANGETWO(res.data.chailv[item].total);
                            }
                            vm.arr2 = res.data.chailv;
                            vm.j2 = total_money;

                            var total_money = 0;
                            for (item in res.data.cheliang) {
                                total_money += PUATTRBUTE.CHANGETWO(res.data.cheliang[item].total);
                            }
                            vm.arr3 = res.data.cheliang;
                            vm.j3 = total_money;

                            var total_money = 0;
                            for (item in res.data.qita) {
                                total_money += PUATTRBUTE.CHANGETWO(res.data.qita[item].total);
                            }
                            vm.arr4 = res.data.qita;
                            vm.j4 = total_money;

                        } else {
                            if(res.msg == "暂无权限"){
                                vm.permissions= 1 ;
                            }
                            layer.msg(res.msg, {time: 1000, icon: 2})
                        }
                    })
                )
            },
            //打开面板
            adduser: function (idx, tid, tabs) {
                if(this.permissions == 1){
                    layer.alert("抱歉，您没有此权限！");
                }else {
                    var title = ''
                    this.stus = idx;
                    this.tid = tid;
                    vm.tabs = 0;
                    vm.num = '';
                    vm.unit = '';
                    vm.note = '';
                    vm.usepeople = '';
                    vm.total = '';
                    vm.price = '';
                    vm.spend = '';
                    $("#tcreatetime").val(PUATTRBUTE.NEWDATE());
                    var select = 'dd[lay-value=""]';// 设置value
                    $('#fy_name').siblings("div.layui-form-select").find('dl').find(select).click();
                    vm.initselect();
                    layui.form.render('select');// 再次渲染select
                    if (idx == 1) {
                        title = '新增信息';
                        $("#tabli li:eq(0)").show();
                        $("#tabli li:eq(1)").show();
                        $("#tabli li:eq(2)").show();
                        $("#tabli li:eq(3)").show();
                        layui.form.render();
                        $("#tabli li:eq(0)").addClass('layui-this').siblings('li').removeClass('layui-this');
                    } else {
                        //编辑初始化数据
                        var obj = {
                            id: tid,
                            project_id: vm.project_id
                        }
                        //切换面板隐藏顶部li
                        if (tabs == 0) {
                            $("#tabli li:eq(0)").addClass('layui-this').siblings('li').removeClass('layui-this');
                            $("#tabli li:eq(0)").show();
                            $("#tabli li:eq(1)").hide();
                            $("#tabli li:eq(2)").hide();
                            $("#tabli li:eq(3)").hide();
                            vm.tabs = 0;
                        } else if (tabs == 1) {
                            $("#tabli li:eq(1)").addClass('layui-this').siblings('li').removeClass('layui-this');
                            $("#tabli li:eq(0)").hide();
                            $("#tabli li:eq(1)").show();
                            $("#tabli li:eq(2)").hide();
                            $("#tabli li:eq(3)").hide();
                            vm.tabs = 1;
                        } else if (tabs == 2) {
                            $("#tabli li:eq(2)").addClass('layui-this').siblings('li').removeClass('layui-this');
                            $("#tabli li:eq(0)").hide();
                            $("#tabli li:eq(1)").hide();
                            $("#tabli li:eq(2)").show();
                            $("#tabli li:eq(3)").hide();
                            vm.tabs = 2;
                        } else if (tabs == 3) {
                            $("#tabli li:eq(3)").addClass('layui-this').siblings('li').removeClass('layui-this');
                            $("#tabli li:eq(0)").hide();
                            $("#tabli li:eq(1)").hide();
                            $("#tabli li:eq(2)").hide();
                            $("#tabli li:eq(3)").show();
                            vm.tabs = 3;
                        }
                        title = '编辑信息';
                        $.when(PUATTRBUTE.REQUESTFUN('api/Othermoney/othermoneyedit', obj).done(function (res) {
                                if (res.code == 1) {
                                    var select = 'dd[lay-value="' + res.data.fy_num + ',' + res.data.other_id + '"]';// 设置value
                                    $('#fy_name').siblings("div.layui-form-select").find('dl').find(select).click();
                                    vm.yid = res.data.other_id;
                                    layui.form.render('select');// 再次渲染select
                                    vm.unit = res.data.unit; //单位
                                    vm.num = res.data.num; //数量
                                    vm.usepeople = res.data.usepeople;
                                    vm.total = res.data.total; //
                                    vm.price = res.data.price; //单价
                                    vm.spend = res.data.spend; //支出内容
                                    vm.note = res.data.note;//备注
                                    $('#tcreatetime').val(vm.formatDate(res.data.createtime));
                                } else {
                                    layer.msg(res.msg, {time: 1000, icon: 2})
                                }
                            })
                        )
                    }
                    layui.form.render('select');// 再次渲染select
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['700px', '550px'], //宽高
                        title: title,
                        content: $("#addopen")
                    });
                }
            },
            formatDate: function (crtime) {
                var date = new Date(parseInt(crtime) * 1000) // 时间戳为10位需乘1000，为13位则不用
                var Y = date.getFullYear() // 年
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) // 月
                var D = date.getDate() < 10 ? '0' + date.getDate() + '' : date.getDate() + '' // 日
                return Y + '-' + M + '-' + D // yyyy-mm-dd
            },
            //初始化select
            initselect: function () {
                var load = layer.load(2, {
                    shade: [0.6, '#fff'] //0.1透明度的白色背景
                })
                var obj = {
                    project_id: this.project_id,
                    page: 1,
                    limit: 99,
                    type: vm.tabs +1
                }
                var materialhtml = ''; //其它费用
                materialhtml += '<option value="">请选择</option>';
                $.when(PUATTRBUTE.REQUESTFUN('api/Classify/otherindex', obj).done(function (res) {
                        if (res.code == 1) {
                            sessionStorage.setItem('other', JSON.stringify(res.data.list));
                            var arr = res.data.list;
                            for (item in arr) {
                                materialhtml += '<option   value="' + arr[item].fy_num + ',' + arr[item].id + '">' + arr[item].fy_name + '</option>'
                            }
                            $("#fy_name").append(materialhtml);
                            layui.form.render();
                            layer.close(load)
                        } else {
                            layer.msg(res.msg, {time: 1000, icon: 2})
                        }
                    })
                )

            },
            //导出
            exports: function () {
                if(this.permissions == 1){
                    layer.alert("抱歉，您没有此权限！");
                }else {
                    var tableHtml = $('#dctable');
                    $(tableHtml).css({
                        'border':'1px solid #d5d5d2',
                        'text-align':'center',
                        'border-collapse':'collapse',
                    });
                    $(tableHtml).find('tr td').css({
                        'text-align':'center',
                        'border':'1px solid #d5d5d2',
                        'line-height':'30px',
                        'padding':'0px 10px',
                        'min-width':'100px'
                    });
                    var html = "<html><head><meta charset='utf-8' /></head><body>" + tableHtml[0].outerHTML + "</body></html>";
// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
                    var blob = new Blob([html], { type: "application/vnd.ms-excel" });
                    var urlA = document.createElement('a');
// 利用URL.createObjectURL()方法为a元素生成blob URL
                    $('.table-btn-group').append(urlA);
                    urlA.href = URL.createObjectURL(blob);
// 设置文件名，目前只有Chrome和FireFox支持此属性
                    urlA.download = "其它费用.xls";
                    urlA.click();
                }
            },
            //删除
            del: function (e) {
                var obj = {
                    id: e,
                    project_id: vm.project_id
                }
                layer.confirm('确定删除吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    var load = layer.load(2, {
                        shade: [0.6, '#fff'] //0.1透明度的白色背景
                    })
                    $.when(PUATTRBUTE.REQUESTFUN('api/Othermoney/othermoneydel', obj).done(function (res) {
                            layer.close(load);
                            if (res.code == 1) {
                                layer.msg(res.msg, {time: 1000, icon: 1})
                                vm.initData();
                            } else {
                                layer.msg(res.msg, {time: 1000, icon: 2})
                            }
                        })
                    )
                }, function () {
                    layer.closeAll();
                });
            }
        },
        watch: {
            num: function () {
                if (this.num != '' && this.price != '') {
                    this.total = this.num * this.price;
                }
            },
            price: function () {
                if (this.num != '' && this.price != '') {
                    this.total = this.num * this.price;
                }
            }
        }
    })
</script>


